
  <!-- A modal with its content -->
  <section class="css-modal" id="modal"
      style="top: 101%;"
      tabindex="-1" role="dialog" aria-labelledby="css-modal_label" aria-hidden="true">

    <div class="css-modal_inner">
      <header class="css-modal_header">
        <h2 id="css-modal_label">Headline</h2>
      </header>

      <div class="css-modal_content">
        <p>Content.</p>
        <p><a href="#stackable">Stackable</a></p>
      </div>

      <footer>
        <p>Footer</p>
      </footer>
    </div>

    <!-- Use Hash-Bang to maintain scroll position when closing modal -->
    <a href="#!" class="css-modal_close" title="Close this modal"
        data-dismiss="modal" data-close="Close">&times;</a>
  </section>

  <!-- A modal with its content -->
  <section class="css-modal" id="stackable"
      style="top: 101%;"
      tabindex="-1" role="dialog" aria-labelledby="css-modal_label" aria-hidden="true">

    <div class="css-modal_inner">
      <div class="css-modal_content"></div>
    </div>

    <!-- Use Hash-Bang to maintain scroll position when closing modal -->
    <a href="#!" class="css-modal_close" title="Close this modal"
        data-dismiss="modal" data-close="Close">&times;</a>
  </section>

  <!-- A modal with its content -->
  <section class="css-modal" id="non-stackable"
      style="top: 101%;"
      tabindex="-1" role="dialog" aria-labelledby="css-modal_label" aria-hidden="true">

    <div class="css-modal_inner">
      <div class="css-modal_content"></div>
    </div>

    <!-- Use Hash-Bang to maintain scroll position when closing modal -->
    <a href="#!" class="css-modal_close" title="Close this modal"
        data-dismiss="modal" data-close="Close">&times;</a>
  </section>

  <!-- An iframe that may interfere with modal script -->
  <iframe style="position: fixed; top: 101%" src="iframe.html" frameborder="0" allowfullscreen></iframe>

  <!-- Source -->
  <script src="../modal.js"></script>

  <!-- Specs -->
  <script src="spec/modal.js"></script>
